<template>
  <div>
      <a-card>
          <a-table
        :row-key="(record) => record.id"
        :columns="columns"
        :data-source="rightsList"
        :pagination="pagination"
        @change="handleTableChange"
        bordered
      >
      <span slot="tags" slot-scope="text,record">
          <a-tag color="pink" v-if="record.level==='0'">一级</a-tag>
          <a-tag color="green" v-else-if="record.level==='1'">二级</a-tag>
          <a-tag color="blue" v-else-if="record.level==='2'">三级</a-tag>
      </span>
       </a-table>
      </a-card>
       
  </div>
</template>

<script>
import {getRightList} from '@/network/rights'
export default {
    components:{},
    data(){
        return{
            rightsList:[],
            pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        showSizeChanger: true,
        pageSizeOptions: ["5", "10", "15", "20", "25"],
      },
            columns: [
        {
          title: "序号",
          customRender: (text, record, index) => {
            return (
              this.pagination.pageSize * (this.pagination.current - 1) + index + 1
            );
          },
          align: "center",
        },
        {
          title: "权限名称",
          dataIndex: "authName",
          align: "center",
        },
        {
          title: "路径",
          dataIndex: "path",
          align: "center",
        },
        {
          title: "权限等级",
          dataIndex: "level",
          align: "center",
          scopedSlots: { customRender: "tags" },
        },
            ]
        }
    },
    created(){
        this.getRightList()
    },
    methods:{
        getRightList(){
            getRightList('list').then(
                res =>{
                    this.rightsList=res.data
                }
            )
        },
        handleTableChange(pagination) {
      this.pagination = pagination;
      this.getRightList();
    },
    }

}
</script>

<style lang="less" scoped>

</style>